/* ============================
   Algemene styling
============================ */
body {
    background-color: #f8f9fa;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Belangrijk voor footer fix */
}

main {
    flex: 1; /* Duwt footer naar beneden */
}


/* ============================
   HERO
============================ */
.hero {
    background-image: url('../images/Banner.jpg');
    min-height: 60vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* ============================
   Features
============================ */
.feature-icon {
    font-size: 40px;
    color: #7c0000;
}

.feature-box {
    transition: transform .2s ease;
}

.feature-box:hover {
    transform: translateY(-5px);
}

/* ============================
   Pagina header
============================ */
.page-header {
    color: rgb(0, 0, 0);
}

/* ============================
   Info box
============================ */
.info-box {
    transition: transform .2s ease;
}

.info-box:hover {
    transform: translateY(-5px);
}

/* ============================
   Product cards
============================ */
.product-card {
    transition: transform .2s ease;
}

.product-card:hover {
    transform: translateY(-5px);
}

/* ============================
   Footer altijd onderaan
============================ */
footer {
    margin-top: auto;
}